<template>
  <s-page>
    <view class="container">
      <c-demo-block title="基础用法">
        <s-code-input v-model="value1" focus />
      </c-demo-block>

      <c-demo-block title="横线模式">
        <s-code-input v-model="value2" mode="line" />
      </c-demo-block>

      <c-demo-block title="设置长度">
        <s-code-input v-model="value3" :maxlength="6" />
      </c-demo-block>

      <c-demo-block title="设置间距">
        <s-code-input v-model="value4" :gutter="0" />
      </c-demo-block>

      <c-demo-block title="细边框">
        <s-code-input v-model="value5" hairline />
      </c-demo-block>

      <c-demo-block title="调整颜色">
        <s-code-input v-model="value6" color="#f56c6c" border-color="green" />
      </c-demo-block>

      <c-demo-block title="加粗">
        <s-code-input v-model="value11" bold />
      </c-demo-block>

      <c-demo-block title="用●替代输入内容">
        <s-code-input v-model="value7" dot />
      </c-demo-block>

      <c-demo-block title="是否自动获取焦点">
        <s-code-input v-model="value8" />
      </c-demo-block>

      <c-demo-block title="事件回调">
        <s-code-input v-model="value9" @finish="onCodeInputFinish" />
      </c-demo-block>

      <c-demo-block title="自定义样式">
        <s-code-input
          v-model="value10"
          mode="none"
          item-style="background-color:#eee;border-radius:10rpx"
        />
      </c-demo-block>
    </view>
  </s-page>
</template>

<script>
export default {
  data: () => ({
    value1: '',
    value2: '',
    value3: '',
    value4: '',
    value5: '',
    value6: '',
    value7: '',
    value8: '',
    value9: '',
    value10: '',
    value11: '',
  }),
  onLoad() { },
  methods: {
    onCodeInputFinish(value) {
      uni.showToast({
        title: value,
        icon: 'none',
        mask: false,
      });
    },
  },
};
</script>
<style lang="scss">
page {
  background-color: white;
}
</style>
<style lang="scss" scoped>
.container {
  padding: 0 $padding-md;
  // ::v-deep {
  //   .c-demo-block {
  //     &__title {
  //       padding-left: $padding-md;
  //     }
  //   }
  // }
}
</style>
